<!DOCTYPE html><!--[if lt IE 7]>
<html class="ie ie6"><![endif]-->
<!--[if IE 7 ]>
<html class="ie ie7"><![endif]-->
<!--[if IE 8 ]>
<html class="ie ie8"><![endif]-->
<!--[if IE 9 ]>
<html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">   
    <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
</head>
<body>
<p id="J_btn">value="fuck"</p>
<form action="" id="J_form">
<input type="text" id="J_test" name="aa"  size="5" value="qqqqqqqqq" maxlength="10" />
<input type="text" id="J_test" name="bb" size="5" value="qqqqqqqqq" maxlength="10" />

</form>
    <script>
            var eventUtil = {
                addHandler:function(ele, type, handler){
                    if (ele.addEventListener) {
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele['on'+type]= handler;
                    }
                },
                getEvent:function(event){
                    return event ? event : window.event;
                },
                getTarget:function(event){
                    return event.target || event.srcElement; 
                },
                preventDefault:function(event){
                    if (event.preventDefault) {
                        event.preventDefault();
                    }else{
                        event.returnValue = false;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if (ele.removeEventListener) {
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele['on'+type]= null;
                    }
                },

                stopPropagation:function(event){
                    if (event.stopPropagation) {
                        event.stopPropagation();
                    }else{
                        event.cancelBubble = true;
                    }
                }
            }

            var btn = document.getElementById("J_btn");
            var handler = function(event){
                alert(1);
            }

            eventUtil.addHandler(btn, "click", handler);

            btn.onclick = function(event){
                event = eventUtil.getEvent(event);
                console.log(event.type);
            }

            var txt = document.getElementById('J_test');

            var fun = function(event){
                console.log('键盘事件出发成功！')
            }

            eventUtil.addHandler(txt, "keyup", fun);
        
    </script>

    <script>
    //表单序列化
    function serialize(form){
        var parts = [],
            field = null,
            i,len,j,optLen,option,optValue;
            for (var i = 0,len = form.elements.length; i < len; i++) {
                field = form.elements[i];
                switch(field.type){
                    case "select-one":
                    case "select-multiple":
                        if (field.name.length) {
                            for(j=0, option = field.option.length; j < optLen; J++){
                                option = field.option[j];
                                if(option.selected){
                                    optValue = "";
                                    if (option.hasAttribute) {
                                        optValue = (option.hasAttribute("value") ? option.value : option.text );
                                    }else{
                                        optValue = (option.attributes["value"].specified ? option.value : option.text);
                                    }
                                    parts.push(encodeURIComponent(field.name) + "=" +
                                        encodeURIComponent(optValue));
                                }
                            }
                        };
                    case undefined: //字段集
                    case "file": //文件输入框
                    case "submit":
                    case "reset":
                    case "button":
                        break;
                    case "radio":
                    case "checkbox":
                        if (!field.checked) {
                            break;
                        };
                    default:
                    if (field.name.length) {
                        parts.push(encodeURIComponent(field.name) + "=" +
                                        encodeURIComponent(field.value));
                    };
                }
            };
            return parts.join("&");
    }

    var f = document.getElementById("J_form");
    var v = serialize(f);
    alert(v);
    </script>
</body>
</html>